<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>平滑滚动</title>
     <style>
        html,body {
          height: 2400;
          background-color: lightblue;
          /* 只要加一句这个就可以平滑定位，提升用户滚动体验！ */
          scroll-behavior: smooth;
          padding: 0px;
          margin: 0px;
        }
        .box{
            text-align: center;
            font-size: 30px;
            height: 800px;
            
        }
        #one{
            background: #ff6600;
        }
        #two{
            background: #ff0000;
        }
        #three{
            background: #005d17;
        }
        .back {
          position: fixed;
          right: 0;
          bottom: 100px;
        }
        .click{
            background-color: lightcoral;
            display: block;
            padding: 20px;
            color: #fff;
        }
        .click:hover{
            background: #000;
        }
      </style>
 </head>
 <body>
    <div class="box" id="one">我是1</div>
    <div class="box" id="two">我是2</div>
    <div class="box" id="three">我是3</div>
    <div class="back">
        <a class="click" href="#one">1</a>
        <a class="click" href="#two">2</a>
        <a class="click" href="#three">3</a>
    </div>
 </body>
 </html>
